<template>
	<div class="ads_audit">
		<el-tabs type="border-card" style="margin:26px 0 0;">
			<el-tab-pane label="城主广告">
				<el-form :inline="true" label-width="120px" :model="formInline" class="demo-form-inline">
					<el-form-item label="按主城区域">
						<el-cascader style="min-width: 200px;" v-model="value" :options="optionsAddress" @change="handleChangeZone" ref="cascaderAddr"></el-cascader>
					</el-form-item>
					<el-form-item label="审核状态">
						<el-select style="width: 120px;" v-model="formInline.adStat" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<div style="margin:26px 0 0;">
			<el-table
			        :data="pageInfo.dtos"
			        v-loading="table_loading"
			        element-table_loading-text="加载中"
			        stripe
			        style="width: 100%">
			    <el-table-column
			            type="index"
			            width="80"
			            label="序号">
			    </el-table-column>
				<el-table-column label="城主">
					<template scope="scope">
						<span class="pointer" @click="$router.push('/user/user_detail/'+scope.row.userId)">{{ scope.row.cityName }}</span>
					</template>
				</el-table-column>
			    <el-table-column
			            width="215"
			            label="主图">
			        <template scope="scope">
			            <div style="display: inline-block;">
			                <img class="banner" :src="scope.row.adContent" style="width:55px;">
			            </div>
			        </template>
			    </el-table-column>
	
			    <el-table-column
			             prop="url"
			             label="链接">
			    </el-table-column>
			    <el-table-column
			            prop="creTime"
			            label="时间">
			    </el-table-column>

			    <el-table-column label="操作" width="140">
			        <template scope="scope">
						<div v-if="scope.row.adStat==2">
							<el-button type="danger" size="small"
							           @click="edit(scope.row,'0')">拒绝
							</el-button>
							<el-button type="success" size="small"
							           @click="edit(scope.row,'1')">同意
							</el-button>
						</div>
						<div v-if="scope.row.adStat==1">
							审核已同意
						</div>
						<div v-if="scope.row.adStat==0">
							审核已拒绝
						</div>
						<div v-if="scope.row.adStat==3">
							已下架
						</div>
			        </template>
			    </el-table-column>
			</el-table>
			<div class="paginate">
			    <el-pagination
			            @current-change="handleCurrentChange"
			            :current-page="pageInfo.pageNum"
			            :page-size="pageInfo.pageSize"
			            layout="total, prev, pager, next, jumper"
			            :total="pageInfo.count"
			            >
			    </el-pagination>
			</div>
		</div>
		
		<el-dialog
		  title="提示"
		  :visible.sync="centerDialogVisible"
		  width="30%"
		  custom-class="adsAuditDialog"
		  center>
		  <div v-if="form.adStat == 0">
			  <el-form :model="form" style="background-color: #FFFFFF;padding-top: 20px;">
			     <el-form-item label="拒绝原因：" label-width="120px">
			         <el-input v-model="form.updUser" style="width:180px"></el-input>
			     </el-form-item>             
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="onSubmitEdit">{{confirmBtnText}}</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import address from '../../adsAddress.js'
	export default {
		data() {
			return {
				formInline: {
					pageNum:1,
					pageSize: 10,
					cityNum: '',
					adStat: ''
				},
				submitBtnText: '确认通过？',
				confirmBtnText: '确认通过',
				centerDialogVisible: false,
				table_loading: false,
				pageInfo: {
				    pageNum: 1,
				    pageSize: 1,
				    count: 1,
				    dtos:[]
				},
				form: {
					adStat: '',
					adCode: '',
					updUser: ''
				},
				value: [],
				optionsAddress: address(),
				options: [
					{
						value: '',
						label: '全部'
					},
					{
						value: '1',
						label: '通过'
					},
					{
						value: '0',
						label: '拒绝'
					},
					{
						value: '2',
						label: '审核中'
					},
					{
						value: '3',
						label: '下架'
					},
				]
			}
		},
		created() {

		},
		activated() {
			this.pageInfo = {
				    pageNum: 1,
				    pageSize: 1,
				    count: 1,
				    dtos:[]
				}
			this.getAdsList(this.pageInfo.pageNum)
		},
		methods: {
			getAdsList(page = 1) {
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.dataApi.ajax('selectPageCityAd', this.formInline, res => {
				    this.table_loading = false;
				    if (res.responseType === 'S') {
				        this.pageInfo = res
				    }
				});
			},
			handleChangeZone(e) {
				let str = this.$refs['cascaderAddr'].currentLabels.toString()
				str = str.replace(/,/g, "")
				let data = {
					bankProvince: '',
					bankCity: ''
				}
				this.formInline.cityNum = this.value[2]
				console.log(this.formInline)
				this.optionsAddress.forEach(item => {
					if (item.value === this.value[0]) {
						data.bankProvince = item.label
						item.children.forEach(ite => {
							if (ite.value == this.value[1]) {
								data.bankCity = ite.label
							}
						})
				
					}
				})
			},
			onSubmit() {
				
				this.getAdsList(1)
			},
			handleCurrentChange(val) {
				this.getAdsList(val)
			},
			onSubmitEdit() {
				if(this.form.updUser == '' && this.form.adStat == 0) {
					this.showMsg('请填写原因')
					return
				}
				this.form.updUser = '拒绝原因:' + this.form.updUser
				this.dataApi.ajax('editCityAd', this.form, res => {
				    if (res.responseType === 'S') {
				        this.showMsg(this.confirmBtnText + '成功')
						this.centerDialogVisible = false
						this.getAdsList(1)
				    }
				});
			},
			edit(data, type) {
				this.form.adCode = data.adCode
				this.form.adStat = type
				if(type == 1) {
					this.submitBtnText = '确认通过?'
					this.confirmBtnText = '确认通过'
					this.centerDialogVisible = true
				}
				if(type == 0){
					this.submitBtnText = '确认拒绝?'
					this.confirmBtnText = '确认拒绝'
					this.centerDialogVisible = true
				}
			}
		}
	}
</script>

<style>
	.ads_audit .el-form-item{
		margin-bottom: 0;
	}
	.ads_audit .el-dialog__header {
		text-align: center;
	}
	.ads_audit .el-dialog__footer{
		text-align: center;
	}
	.adsAuditDialog{
		width: 400px;
	}
</style>
